<template>
  <div class="globalzj grayback">
    <van-nav-bar title="家庭档案" left-arrow @click-left="onClickLeft" />
    <div class="jtlist">
      <div class="hz" v-for="item in list">
        <div class="lefthz">
          <div class="hzxx">
            <span class="hzname">{{ item.name }}</span>
            <span class="idcard">{{
              item.idCard.replace(/(.{6}).*(.{4})/, "$1********$2")
            }}</span>
            <span class="moren" v-if="item.defaultFlag == 1">默认</span>
          </div>
          <div class="hznl">
            <span>{{ item.genderValue }}</span>
            <span>{{ item.age }}岁</span>
          </div>
        </div>
        <div class="righthz"><van-icon name="edit" @click="bj(item)" /></div>
      </div>
      <div class="hz1" v-if="list.length !== 6" @click="add">
        <div class="add">+</div>
        <div class="add1">添加患者</div>
      </div>
      <div class="tip">当前最多可添加6人</div>
    </div>
    <van-popup v-model="show" position="right" :overlay="true">
      <van-nav-bar
        :title="title"
        left-arrow
        @click-left="onClickLeft1"
        right-text="保存"
        @click-right="onClickRight"
      />
      <van-field v-model="form.name" label="真实姓名" />
      <van-field v-model="form.idCard" label="身份证号" />

      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="form.gender" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="radio" label="默认就诊人">
        <template #input>
          <van-radio-group v-model="form.defaultFlag" direction="horizontal">
            <van-radio :name="1"></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-button
        type="danger"
        v-if="this.title !== '新增患者'"
        @click="shanchu(form.id)"
        class="deleter"
        >删除</van-button
      >
    </van-popup>
  </div>
</template>
<script>
import { triggerRef } from "vue";
import { Toast } from "vant";
import service from "../request";
import { Dialog } from "vant";
export default {
  data() {
    return {
      list: [],
      show: false,
      form: {},
      title: "",
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    bj(item) {
      this.form = item;
      this.title = "编辑患者";
      this.show = true;
    },
    shanchu(o) {
      Dialog.alert({
        title: "删除",
        message: "是否确认删除该患者信息?",
      }).then(async () => {
          const res=await service.delete(`/patient/del/${o}`);
          if(res.code == 10000){
              Toast.success("删除成功")
                 this.show = false;
          this.getdata();
          }

      });
    },
    async onClickRight() {
      if (this.form.defaultFlag == undefined) {
        this.form.defaultFlag = 0;
      }
      if (this.title == "新增患者") {
        const res = await service.post("/patient/add", this.form);
        console.log(res);
        if (res.code == 10000) {
              Toast.success(`新增成功`);
          this.show = false;
          this.getdata();
        } else {
          Toast.fail(`${res.message}`);
        }
      } else {
        delete this.form.genderValue
                delete this.form.age
        const res = await service.put("/patient/update", this.form);
        console.log(res);
        if (res.code == 10000) {
                       Toast.success(`修改成功`);
         this.show = false;
          this.getdata();
        } else {
          Toast.fail(`${res.message}`);
        }
      }
    },
    add() {
      this.form = {};
      this.title = "新增患者";
      this.show = true;
    },
    async getdata() {
      const res = await service.get("/patient/mylist");
      console.log(res);
      this.list = res.data;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickLeft1() {
      this.show = false;
    },
  },
};
</script>
<style>
.deleter {
  width: 90%;
  border-radius: 50px;
  margin: 0 auto;
  text-align: center;
  display: inherit;
}
.van-popup {
  width: 100%;
  height: 100%;
}
.van-overlay {
  background: none !important;
}
.van-nav-bar__left .van-nav-bar__text {
  color: #000;
}
.van-nav-bar__right .van-nav-bar__text {
  color: red;
}
.van-nav-bar .van-icon {
  color: #000;
}
</style>
<style scoped>
.tip {
  text-align: left;
  color: #848484;
  font-size: 12px;
}
.add1 {
  text-align: center;
  font-size: 14px;
  color: red;
}
.add {
  text-align: center;
  width: 100%;
  font-size: 19px;
  color: red;
}
.hznl span {
  display: inline-block;
  margin-right: 15px;
}
.hznl {
  color: #c3c3c5;
  margin-top: 10px;
  font-size: 14px;
}
.moren {
  display: inline-block;
  padding: 1px;
  box-sizing: border-box;
  background: red;
  color: #fff;

  font-size: 10px;
  text-align: center;
}
.idcard {
  width: 110px;
  margin-right: 10px;
  height: auto;
  display: inline-block;
  font-size: 12px;
}
.hzname {
  width: 50px;
  white-space: wrap;
  margin-right: 30px;
  display: inline-block;
  color: #000;
  font-size: 14px;
}
.hzxx {
}
.jtlist {
  width: 100%;
  height: calc(100% - 46px);
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.hz1 {
  background: #f6f7f9;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  height: auto;
  box-sizing: border-box;

  border-radius: 10px;
}
.hz {
  background: #f6f7f9;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  height: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
}
</style>
